@import "./message.scss";

.pe-alert {
    --pe-alert-bg-color: var(--pe-color-success);
    --pe-alert-text-color: var(--pe-color-white);
    --pe-alert-icon-color: var(--pe-color-white);
    --pe-alert-close-color: var(--pe-color-white);
    --pe-alert-icon-size: 20px;
}

.pe-alert {
    position: relative;
    width: 100%;
    padding: 10px 20px 10px 10px;
    border-radius: var(--pe-border-radius);
    background-color: var(--pe-alert-bg-color);
    font-size: var(--pe-alert-icon-size);
    display: flex;
    align-items: center;
    word-break: break-all;
    animation: anim .5s;

    .pe-alert-icon {
        width: var(--pe-alert-icon-size);
        height: var(--pe-alert-icon-size);
        font-size: var(--pe-alert-icon-size);
        color: var(--pe-alert-icon-color);
        margin-right: 5px;
    }

    .pe-alert-title {
        font-size: var(--pe-font-size-large);
        color: var(--pe-alert-text-color);
        font-weight: bold;
    }

    .pe-alert-close {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 5px;
        width: var(--pe-alert-icon-size);
        height: var(--pe-alert-icon-size);
        font-size: var(--pe-alert-icon-size);
        color: var(--pe-alert-close-color);
        cursor: pointer;
    }
}

.pe-alert-dark-success {
    --pe-alert-bg-color: var(--pe-color-success);
    --pe-alert-text-color: var(--pe-color-white);
    --pe-alert-icon-color: var(--pe-color-white);
    --pe-alert-close-color: var(--pe-color-white);
}

.pe-alert-dark-warning {
    --pe-alert-bg-color: var(--pe-color-warning);
    --pe-alert-text-color: var(--pe-color-white);
    --pe-alert-icon-color: var(--pe-color-white);
    --pe-alert-close-color: var(--pe-color-white);
}

.pe-alert-dark-info {
    --pe-alert-bg-color: var(--pe-color-info);
    --pe-alert-text-color: var(--pe-color-white);
    --pe-alert-icon-color: var(--pe-color-white);
    --pe-alert-close-color: var(--pe-color-white);
}

.pe-alert-dark-error {
    --pe-alert-bg-color: var(--pe-color-error);
    --pe-alert-text-color: var(--pe-color-white);
    --pe-alert-icon-color: var(--pe-color-white);
    --pe-alert-close-color: var(--pe-color-white);
}

.pe-alert-light-success {
    --pe-alert-bg-color: var(--pe-color-success1);
    --pe-alert-text-color: var(--pe-color-success);
    --pe-alert-icon-color: var(--pe-color-success);
    --pe-alert-close-color: #a8abb2;
}

.pe-alert-light-warning {
    --pe-alert-bg-color: var(--pe-color-warning1);
    --pe-alert-text-color: var(--pe-color-warning);
    --pe-alert-icon-color: var(--pe-color-warning);
    --pe-alert-close-color: #a8abb2;
}

.pe-alert-light-info {
    --pe-alert-bg-color: var(--pe-color-info1);
    --pe-alert-text-color: var(--pe-color-info);
    --pe-alert-icon-color: var(--pe-color-info);
    --pe-alert-close-color: #a8abb2;
}

.pe-alert-light-error {
    --pe-alert-bg-color: var(--pe-color-error1);
    --pe-alert-text-color: var(--pe-color-error);
    --pe-alert-icon-color: var(--pe-color-error);
    --pe-alert-close-color: #a8abb2;
}